<template>
    <div class="movie">
        <!-- 电影的nav -->
        <div class="movie-nav">
            <!-- 切换地区 -->
            <div 
                class="position">
                广州
                <!-- <i class="bi bi-caret-down-fill"></i> -->
            </div>
            <!-- 切换视图组件 -->
            <div @click='changeIndex(0,"mvShowing")' :class="['item',index_com==0?'active':'']">正在热映</div>
            <div @click='changeIndex(1,"mvComing")' :class="['item',index_com==1?'active':'']">即将上映</div>
            <!-- 跳转搜索功能 -->
            <div 
                class="search"
                @click="gotoPage('/search-movie')">
                <i class="bi bi-search"></i>
            </div>
        </div>
        <keep-alive>
            <component
                :is='comName'
                >
            </component>
        </keep-alive>

    </div>
</template>

<script>
import mvComing from '@/components/movie_page/mvComing.vue'
import mvShowing from '@/components/movie_page/mvShowing.vue'
export default {
    name: 'Movie',
    data() {
        return {
            comName: 'mvShowing',
            index_com: 0,
        }
    },
    components: {
        mvComing,
        mvShowing,
    },
    methods: {
        changeIndex(n,cName) {
            this.index_com = n;
            this.comName = cName;
        },
        gotoPage(url) {
            this.$router.push(url);
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/common/variable.scss";
.movie-nav {
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    color: $fontColor3;
    padding: 0px 10px;
    box-sizing: border-box;
    font-size: 18px;
    background: #fff;
    border-bottom: 2px solid $borderColor1;
    position: sticky;
    z-index: 999999;
    top: 0px;
    .item {
        font-weight: bold;
        height: 100%;
        line-height: 50px;
        box-sizing: border-box;
        &.active {
            color: $fontColor1;
            border-bottom: 2px solid $fontColor1;
        }
    }
    .search {
        font-size: 24px;
        color: $fontColor1;
    }
    .position {
        i {
            margin-left: -6px;
        }
    }
}
</style>